import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:delivery_application/common_widget/round_button.dart';
import 'package:delivery_application/common_widget/round_textfield.dart';
import 'package:delivery_application/view/login/new_password_view.dart';
import 'package:delivery_application/view/login/sign_up_view.dart';
import 'package:otp_pin_field/otp_pin_field.dart';

class OTPView extends StatefulWidget {
  const OTPView({super.key});

  @override
  State<OTPView> createState() => _OTPViewState();
}

class _OTPViewState extends State<OTPView> {
  final _otpPinFieldController = GlobalKey<OtpPinFieldState>();
  @override
  Widget build(BuildContext context) {
    var media = MediaQuery.of(context).size; 
    return Scaffold(
      backgroundColor: Color(0xff00AEEE),
      body: SingleChildScrollView(
        child: Padding(
          
          padding: const EdgeInsets.symmetric(
              vertical: 20,
              horizontal:
                  25),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(
                height: 64,
              ),
              Text(
                "验证码已发送至您的邮箱",
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 50,
                    fontWeight: FontWeight.w800),
              ),

              SizedBox(height: 60), 

              SizedBox(
                height: 60,
                child: OtpPinField(
                    key: _otpPinFieldController,
                    autoFillEnable: false,
                    textInputAction: TextInputAction.done,
                    onSubmit: (text) {
                      print('Entered pin is $text');
                      FocusScope.of(context).requestFocus(FocusNode());
                    },
                    onChange: (text) {
                      print('Enter on change pin is $text');
                    },
                    onCodeChanged: (code) {
                      print('onCodeChanged  is $code');
                    },
                    otpPinFieldStyle: OtpPinFieldStyle(
                      defaultFieldBorderColor:
                          Color.fromARGB(255, 130, 132, 142),
                      activeFieldBorderColor: Color.fromARGB(255, 54, 70, 244),
                      defaultFieldBackgroundColor: Colors.white,
                      activeFieldBackgroundColor: Colors.white,
                    ),
                    maxLength: 4,
                    showCursor: true,

                    cursorColor: Colors.indigo,

                    upperChild: const Column(
                      children: [
                        SizedBox(height: 30),
                        Icon(Icons.flutter_dash_outlined, size: 150),
                        SizedBox(height: 20),
                      ],
                    ),
                    showCustomKeyboard: false,                    
                    cursorWidth: 3,
                    mainAxisAlignment: MainAxisAlignment.center,

                    otpPinFieldDecoration:
                        OtpPinFieldDecoration.defaultPinBoxDecoration),
              ),

              TextButton(
                onPressed: () {},
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "未收到？ ",
                      style: TextStyle(
                        color: Colors.white, //深灰
                        fontSize: 14,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    Text(
                      "点击这里",
                      style: TextStyle(
                        color: Colors.white, //深灰
                        fontSize: 14,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ],
                ),
              ),

              SizedBox(height: 40), 
              RoundButton(
                  title: "下一步",
                  onPressed: () {
                    FocusScope.of(context).requestFocus(FocusNode());
                  }),
            ],
          ),
        ),
      ),
    );
  }
}
